<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>表单元素消息</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript" src="js/header.js"></script>
	<h1>表单元素消息</h1>
	<div class="intro">
		表单各元素在提交或用户交互时的提示文本<br />
		类型：焦点、错误、正确、进度<br />
		元素：input、select、textarea、button
	</div>
	<script type="text/javascript" src="js/itabs.js"></script>	

	<h2>属性</h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>属性名</th>
					<th>属性值</th>
					<th>&#160;</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>info-ignore</td>
					<td>true | false</td>
					<td>
						是否忽略消息提示(默认：false, 即：启用)<br />
						启用：伴随元素事件显示相应消息<br />
						禁用：不显示任务元素消息<br />
						注意：禁用后，以下全部属性将失效
					</td>
					<td><input info-ignore="true" required type="email" name="email" placeholder="请输入邮箱" /></td>
				</tr>
				<tr>
					<td>2</td>
					<td>info-pos</td>
					<td>t | l | r | b | i</td>
					<td>
						消息显示位置(默认：i)<br />
						相对: 表单元素位置<br />
						注意：只有info-pos不为"i"(inline)时, 以下偏移有效
					</td>
					<td><input required type="email" name="email" placeholder="请输入邮箱" /></td>
				</tr>
				<tr>
					<td>3</td>
					<td>info-margin-top</td>
					<td>int</td>
					<td>上偏移</td>
					<td><input info-pos="r" required type="email" name="email" placeholder="info-margin-top=7" /></td>
				</tr>
				<tr>
					<td>4</td>
					<td>info-margin-left</td>
					<td>int</td>
					<td>左偏移</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>info-margin-right</td>
					<td>int</td>
					<td>右偏移</td>
					<td></td>
				</tr>
				<tr>
					<td>6</td>
					<td>info-margin-bottom</td>
					<td>int</td>
					<td>下偏移</td>
					<td></td>
				</tr>
				<tr>
					<td>7</td>
					<td>info-info</td>
					<td>string</td>
					<td>获得焦点时显示消息</td>
					<td><input required type="email" name="email" info-info="必须是有效的邮箱" placeholder="点此试试" /></td>
				</tr>
				<tr>
					<td>8</td>
					<td>info-success</td>
					<td>string</td>
					<td>完成验证时显示消息</td>
					<td><input required type="email" name="email" info-success="邮箱可以注册" placeholder="点此试试" /></td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<h2>方法</h2>
	<div class="codeset">
		<code title="wscformsgclose">// 关闭元素消息(不接受参数)
$(selector).wscformsgclose()</code>
		<div class="br"></div>
		<code title="wscformsgopen(type, text)">/*!
* 显示元素消息时接受参数
* @param string type, 消息类型
*               error, 错误
*               info, 提醒
*               progress, 进程
*               success, 正确
* @param string text, 消息内容
*/
// #1, 错误
$(selector).wscformsgopen('error', '邮箱不正确');
// #2, 提醒
$(selector).wscformsgopen('info', '请填写有效邮箱');
// #3, 进程
$(selector).wscformsgopen('progress', '邮箱检测中...');
// #4, 正确
$(selector).wscformsgopen('success', '邮箱可以注册');</code>
	</div>

	<h2>示例</h2>
	<div class="codeset">
		<code title="#1：禁用消息"><input info-ignore="true" type="email" name="email" placeholder="请输入邮箱" /></code>
		<div class="br"></div>
		<code title="#2：消息定位">/*!
* 支持位置
* t[top], 上方
* l[left], 左方
* r[right], 右方
* b[bottom], 下方
* i[inline], 当前元素下方(无定位)
*/
<input info-pos="t" type="email" name="email" placeholder="请输入邮箱" />
<input info-pos="l" type="email" name="email" placeholder="请输入邮箱" />
<input info-pos="r" type="email" name="email" placeholder="请输入邮箱" />
<input info-pos="b" type="email" name="email" placeholder="请输入邮箱" />
<input info-pos="i" type="email" name="email" placeholder="请输入邮箱" /></code>
		<div class="br"></div>
		<code title="#3：消息类型"><input info-info="必须是有效的邮箱" type="email" name="email" placeholder="请输入邮箱" />
<input info-success="邮箱可以注册" type="email" name="email" placeholder="请输入邮箱" /></code>
	</div>

<script type="text/javascript" src="../../theme/footer.js"></script>
</body>
</html>	
